<template>
  <div class="login_wraper">
    <div class="login_tip">
      <img
        @click="goLast"
       src="../../static/image/返回.png" alt="">
      <span>手机号登录</span>
    </div>
    <form class="postLogin" onSubmit="return false">
      <div>
        <img src="../../static/image/手机号.png"/>
        <span>+86</span>
        <input
          v-model=tel
         type="number" placeholder="请输入手机号">
      </div>
      <div>
        <img src="../../static/image/密码.png"/>
        <input
          v-model=psd
         type="password" placeholder="请输入密码">
      </div>
      <button
        @click="subLogin"
      >登录</button>
    </form>
    <div class="tip"
      v-if="tipMsg.isShow"
    >{{tipMsg.msgTip}}</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "GoToLogin",
  data() {
    return {
      tel: "",
      psd: "",
      tipMsg: {
        isShow: false,
        msgTip: "提示信息都出错啦!"
      }
    };
  },
  watch: {
    userInfo: {
      deep: true,
      handler() {
        if (this.userInfo.code == 200) {
          this.$router.push({ path: "/home", query: { type: "recommend" } });
        } else {
          this.tipMsg.isShow = true;
          this.tipMsg.msgTip = this.userInfo.data.msg;
        }
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    subLogin() {
      if (!this.checkMob()) return;
      this.$store.dispatch("subLogin", { phone: this.tel, psssword: this.psd });
    },
    goLast() {
      history.go(-1);
    },
    checkMob() {
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.tel)) {
        this.tipMsg.isShow = true;
        this.tipMsg.msgTip = "请输入手机号，在检查检查吧";
        return false; //验证没通过
      } else {
        if (this.psd.trim() === "") {
          this.tipMsg.isShow = true;
          this.tipMsg.msgTip = "在逗我，没密码你登录啥";
          return false;
        }
        return true;
      }
    }
  }
};
</script>
<style scoped lang='less'>
@import "../../static/css/gotoLogin.less";
</style>


